<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书页面</title>
<!--    <script type="text/javascript" src="../js/vue.min.js"></script>-->
<!--    <script type="text/javascript" src="../js/axios-0.18.0.js"></script>-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="book">
    <!--注册-->
    <div id="addStu" align="center" v-show="insertStu">
        <table>
            <tr>
                <th>注册页</th>
            </tr>
            <tr>
                <td>
                    <input type="number" placeholder="请输入学号" v-model="student.sno"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="请输入密码" v-model="student.password"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="请确认密码" v-model="student.password"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="a" value="男" v-model="student.gender"/>男
                    <input type="radio" name="a" value="女" v-model="student.gender"/>女
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" placeholder="电话" v-model="student.phone"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="姓名" v-model="student.sname"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="地址" v-model="student.address"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="date" placeholder="出生日期" v-model="student.birthday"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="注册" @click="getList()"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="已有账号?立即登录" @click="addList()"/>
                </td>
            </tr>
        </table>
    </div>
    <!--登录-->
    <div id="sumStu" align="center" v-show="loginStu">
        <table>
            <tr>
                <th>图书管理系统登录</th>
            </tr>
            <tr>
                <td>
                    <input type="number" placeholder="学号" v-model="stus.sno"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="密码" v-model="stus.password"/>
                </td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option>请选择权限</option>
                        <option>读者</option>
                        <option>管理员</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="登录" @click="loginStus()"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="立即登录"/>
                </td>
                <td>
                    <input type="button" value="忘记密码?"/>
                </td>
            </tr>
        </table>
    </div>
    <!--书籍页面展示-->
    <div id="sumBook" align="center" v-show="bookShow">
        <table border="1px solid black" cellpadding="1" cellspacing="1">
            <tr>
                <td>
                    <input type="text" placeholder="请输入书名" name="title" v-model="books.title"/>
                </td>
                <td>
                    <input type="text" placeholder="请输入作者" name="author" v-model="books.author"/>
                </td>
                <td>
                    <select>
                        <option>请选择书本类别</option>
                        <option>科技</option>
                        <option>文学</option>
                        <option>历史</option>
                        <option>都市</option>
                        <option>玄幻</option>
                        <option>武侠</option>
                    </select>
                </td>
                <td>
                    <input type="button" value="搜素" @click="listBooks()"/>
                </td>
                <td>
                    <input type="button" value="添加图书" @click="addB()"/>
                </td>
            </tr>
            <tr>
                <th>书本编号</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>ISBN</th>
                <th>出版日期</th>
                <th>库存</th>
                <th>价格</th>
                <th colspan="3">操作</th>
            </tr>
            <tr align="center" v-for="bo in books">
                <td>{{bo.bno}}</td>
                <td>{{bo.title}}</td>
                <td>{{bo.author}}</td>
                <td>{{bo.pshouse}}</td>
                <td>{{bo.isbn}}</td>
                <td>{{bo.psbirthday}}</td>
                <td>{{bo.inventory}}</td>
                <td>{{bo.price}}</td>
                <td>
                    <input type="button" value="查看"/>
                </td>
                <td>
                    <input type="button" value="编辑"/>
                </td>
                <td>
                    <input type="button" value="删除"/>
                </td>
            </tr>
        </table>
    </div>
    <!--新增书籍-->
    <div id="addBook" align="center" v-show="newBook">
        <table>
            <tr>
                <td>
                    <input type="text" placeholder="请输入书名" v-model="book.title"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="请输入作者" v-model="book.author"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="请输入出版社" v-model="book.pshouse"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" placeholder="请输入ISBN" v-model="book.ISBN"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="date" placeholder="请输入出版日期" v-model="book.psbirthday"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" placeholder="请输入库存" v-model="book.inventory"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" placeholder="请输入价格" v-model="book.price"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="新增" @click="newBooks()"/>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#book",
        data(){
            return{
                stus: [], //注册信息
                books: [], //书籍信息
                student:{  //读者信息
                    sno:'',//学号
                    password:"", //密码
                    gender:"",//性别
                    phone:"",//电话
                    sname:"",//姓名
                    address:"",//地址
                    birthday:""//出生日期
                },
                book:{              //书籍信息
                    title:"",       //书名
                    author:"",      //作者
                    pshouse:"",     //出版社
                    ISBN:"",        //ISBN
                    psbirthday:"",  //出版日期
                    inventory:0,   //库存
                    price:0.0       //价格
                },
                insertStu:false, //注册页面
                loginStu:false,   //登录页面
                bookShow:true,  //书籍页面
                newBook:false,    //新增书籍
            }
        },
        created(){
            this.getBook();
            // this.listBooks();
        },
        methods:{
            //注册
            getList(){
                let _this = this;
                axios({
                    methods:"get",
                    url:"http://localhost:8088/addStudent",
                    params: {
                        sno : _this.student.sno,
                        password : _this.student.password,
                        gender : _this.student.gender,
                        phone : _this.student.phone,
                        sname : _this.student.sname,
                        address : _this.student.address,
                        birthday : _this.student.birthday
                    }
                }).then(resp=>{
                    _this.student =resp.data.msg;
                    console.log(_this.student)
                    alert(_this.student)
                }).catch(err=>{
                    alert("网络错误!"+err)
                })
            },
            //立即登录按钮
            addList(){
                this.insertStu = false;
                this.loginStu = true;
            },
            //登录
            loginStus(){
                let _this = this;
                axios({
                    methods:"get",
                    url:"http://localhost:8088/sumStu",
                    params: {
                        sno : _this.stus.sno,
                        password : _this.stus.password
                    }
                }).then(resp=>{
                    _this.stus = resp.data.msg;
                    console.log(_this.stus);
                    alert(_this.stus)
                }).catch(err=>{
                    alert("网络错误!"+err)
                })
            },
            //书籍展示
            getBook(){
                let _this = this;
                axios({
                    methods:"get",
                    url:"http://localhost:8088/sumBook"
                }).then(resp=>{
                    _this.books = resp.data.rows;
                    console.log(_this.books);
                }).catch(err=>{
                    alert("网络错误!"+err)
                })
            },
            //动态条件书籍查询
            listBooks(){
                let _this = this;
                axios({
                    methods:"get",
                    url:"http://localhost:8088/listBook",
                    params:{
                        title :_this.books.title,
                        author : _this.books.author
                    }
                }).then(resp=>{
                    _this.books = resp.data.rows;
                    console.log(_this.books)
                }).catch(err=>{
                    alert("网络错误!"+err)
                })
            },
            //新增书籍
            newBooks(){
                let _this = this;
                axios({
                    methods:"get",
                    url:"http://localhost:8088/addBook",
                    params:{
                        title:_this.book.title,
                        author:_this.book.author,
                        pshouse:_this.book.pshouse,
                        ISBN:_this.book.ISBN,
                        psbirthday:_this.book.psbirthday,
                        inventory:_this.book.inventory,
                        price:_this.book.price
                    }
                }).then(resp=>{
                    _this.book = resp.data.msg;
                    alert(_this.book)
                    this.newBook = false;
                    this.bookShow= true;
                }).catch(err=>{
                    alert("网络错误!"+err)
                })
            },
            //添加图书按钮
            addB(){
                this.newBook = true;
                this.bookShow = false;
            }
        }
    })
</script>